<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- 导入核心标签库 --%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分页</title>

    <%--  新 Bootstrap 核心 CSS 文件 --%>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <%--  导入 jQuery   --%>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <%--  最新的 Bootstrap 核心 JavaScript 文件   --%>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <%--  导入分页插件 js  --%>
    <script src="${pageContext.servletContext.contextPath}/js/jqPaginator.js"></script>


    <%-- 导入 css 文件   --%>
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/htmleaf-demo.css">
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/main.css">
</head>
<body>
<%-- 重定向 --%>
<%--<c:redirect url="login.jsp"/>--%>
<script>
    var totalPages;
    var pageSize;
    var url = "${pageContext.servletContext.contextPath}/page/getAllPagination.action";
    $(function () {
        // TODO 文档加载成功,先获取一个总页数和每页记录数

        $.ajax({
            async: false,
            url: url,
            type: "POST",
            data: "page=1",
            dataType: "json",
            success: function (data) {
                totalPages = data.pages;
                pageSize = data.size;
            }
        });

    });
    $(function () {
        // TODO 在 div 中添加分页选项
        $.jqPaginator('#pagination2', {
            totalPages: totalPages,
            visiblePages: parseInt(totalPages / 3),
            currentPage: 1,
            pageSize: pageSize,
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            last: '<li class="last"><a href="javascript:;">末页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (page, type) {
                load(page);
            }
        });
    });

    function load(page) {
        // TODO 通过 ajax 获取分页对象
        $.ajax({
            url: url,
            type: "POST",
            data: "page=" + page,
            dataType: "json",
            success: function (data) {
                // 刷新参数
                $("#pagination2").jqPaginator('option', {currentPage: data.pageNum});
                $("#tab_stu tr:gt(0)").remove();
                $.each(data.list, function (i, n) {
                    // 遍历
                    var tr = $("<tr></tr>");
                    tr.append($("<td>" + (n.rid) + "</td>"));
                    tr.append($("<td>" + (n.rname) + "</td>"));
                    $("#tab_stu").append(tr);
                });
            }
        });
    }
</script>

<div class="htmleaf-container">
    <table id="tab_stu" class="table">
        <tr>
            <td>角色编号</td>
            <td>角色名称</td>
        </tr>
    </table>
    <div class="container">
        <div class="row" style="min-width: 500px;padding: 2px 0;text-align: center">
            <ul class="pagination" id="pagination2"></ul>
        </div>
    </div>
</div>

</body>
</html>
